/**
 * Chargement des données JSON pour l'affichage du graphe Highcharts dynamique.
 */
function loadGraphDynamic(nivGeog, geog, idGeog) {
	
	var source = $('#sourceId').get(0).value;
	var periode = $('#periodId').get(0).value;
	var unite = $('#unitId').get(0).value;
	
	var periodeMarche = "";
	if ($('#paramDynamicPeriodId').length != 0) {
		periodeMarche = $('#paramDynamicPeriodId').get(0).value;
	}
	
	var indicateur = "";
	if ($('#paramDynamicIndicateurId').length != 0) {
		indicateur = $('#paramDynamicIndicateurId').get(0).value;
	} else {
		if (statutProduit == 'complet') {
			indicateur = 'PM';
		} else if (statutProduit == 'pasDeMarche') {
			indicateur = 'VOL';
		} else if (statutProduit == 'lancement') {
			indicateur = 'PM';
		} else if (statutProduit == 'incomplet') {
			indicateur = 'VOL';
		} 
	}
	
	if (statutProduit == 'complet' || statutProduit == 'pasDeMarche' || statutProduit == 'lancement' || statutProduit == 'incomplet' ) {
		$.ajax({
	 		traditional: true, 
	 		type: 'POST', 
	 		url: './dataDynamic.do',
	 		target: "_blank", 
	 		data : {
	 			nivGeog: 	nivGeog,
				geog: 		geog,
				source: 	source,
				idGeog: 	idGeog,
				periode: 	periode,
				unite:		unite,
				periodeMarche:	periodeMarche,
				indicateur:		indicateur
	 		},
	 		error: function () {},
	 		success: function (result) { 
	 			displayGraphDynamic(result, nivGeog, geog); 
	 		}
	 	}); 
	} else {
		$('#buttonConfigId').css("display", "none");
		$('#graphDynamic').html('<div align="center" style="padding-top:50px;" class="text-general">Non applicable pour ce produit</div>');
	}
}

/**
 * Affichage du graphe Highcharts dynamique.
 */
function displayGraphDynamic(json, nivGeog, geog) {
	
//	var minJsonData = 1000000;
//	
//	var maxJsonData = -10000;
	
	// France 
	var produitFrance = new Object();
	produitFrance.name = 'France';
	produitFrance.color = '#FFA10E';
	produitFrance.type = 'spline';
	produitFrance.data = json.dataFrance;
	produitFrance.dashStyle = 'shortdash';
	produitFrance.lineWidth = 4; 
	produitFrance.marker = new Object();
	produitFrance.marker.enabled = false;
	produitFrance.tooltip = new Object();
	//produitFrance.tooltip.valueSuffix = '%';
	
	// Liste de tous les produits 
	var seriesProduits = [];
	
	// Marche 
	if (statutProduit == 'complet' || statutProduit == 'lancement') {
		var produitMarche = new Object();
		produitMarche.name = 'Marche';
		produitMarche.color = '#B6C2E0';
		produitMarche.type = 'area';
		produitMarche.yAxis = 1;
		produitMarche.data = json.dataMarche;
		produitMarche.marker = new Object();
		produitMarche.marker.enabled = false;
		produitMarche.tooltip = new Object();
		produitMarche.tooltip.valueSuffix = ' K';
		produitMarche.tooltip.valueDecimals = 0; 
		seriesProduits.push(produitMarche);
	}
	
	// On ajoute France 
	
	seriesProduits.push(produitFrance);
	
	// Puis tous les produits 
	for (prod in json.mapProduits) {
    	var produit = new Object();
    	produit.name = prod;
    	produit.color = json.mapProduitsColor[prod];
    	produit.type = 'spline';
    	produit.data = json.mapProduits[prod];
    	produit.marker = new Object();
    	produit.marker.symbol = 'circle';
    	produit.tooltip = new Object();
    	//produit.tooltip.valueSuffix = '%'; 
    	seriesProduits.push(produit);
//    	for (val in json.mapProduits[prod]) {
//			minJsonData = Math.min(json.mapProduits[prod][val], minJsonData);
//			maxJsonData = Math.max(json.mapProduits[prod][val], maxJsonData);
//		}
    }
	
	// CSS
	$("#graphDynamic").empty();
	$("#buttonConfigId").css("display", "block");
	
//	var minJsondataMarche = 1000000;
//	
//	var maxJsondataMarche = -10000;
//	
//	for (val in json.dataMarche) {
//		minJsondataMarche = Math.min(json.dataMarche[val], minJsondataMarche);
//		maxJsondataMarche = Math.max(json.dataMarche[val], maxJsondataMarche);
//	}
//
//	for (val in json.dataFrance) {
//		minJsonData = Math.min(json.dataFrance[val], minJsonData);
//		maxJsonData = Math.max(json.dataFrance[val], maxJsonData);
//	}
//	
//	maxJsonData += 5;
	
	//var indicateur = "PM";
	var periodeMarcheTitle = "Mensuel";
	if ($('#paramDynamicIndicateurId').length != 0) {
		//indicateur = $('#paramDynamicIndicateurId').get(0).value;
		periodeMarcheTitle = $('#paramDynamicPeriodId').get(0).options[$('#paramDynamicPeriodId').get(0).selectedIndex].text;
	}
	
	var indicateurTitle = "";
	if ($('#paramDynamicIndicateurId').html() == undefined) {
		$('#paramDynamicIndicateurId').html(listeIndicateurs);
		if (statutProduit == 'complet') {
			indicateurTitle = "PM";
		} else if (statutProduit == 'pasDeMarche') {
			indicateurTitle = "VOL";
		} else if (statutProduit == 'lancement') {
			indicateurTitle = "PM";
		} else if (statutProduit == 'incomplet') {
			indicateurTitle = "VOL";
		}
	} else {
		indicateurTitle = $('#paramDynamicIndicateurId').get(0).options[$('#paramDynamicIndicateurId').get(0).selectedIndex].text;
	}
	
	// Affichage du titre du graphe
	var title = "";
	if (nivGeog == geog) { // Niveau France
		title = nivGeog;
	} else { // Autres niveaux 
		title = geog; //nivGeog + ' ' + geog;
	}

	chartDyn = new Highcharts.Chart({
        chart: {
        	renderTo:	'graphDynamic',
        	alignTicks:	false // TODO: NOUVEAU
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: true
        },
        title: {
            text: '<span style="font-size:13px;font-family:Arial;">' + lib_marche + ' : ' + title + ' (' + lib_mois + ')' + "</span>",
            useHTML: true
        },
        subtitle: {
            text: '<span style="font-size:10px;font-family:Arial;"><b>Source :</b> ' + ' ' + $('#sourceId').get(0).options[$('#sourceId').get(0).selectedIndex].text + ' - <b>P&eacute;riode :</b> ' + $('#periodId').get(0).options[$('#periodId').get(0).selectedIndex].text + ' - <b>P&eacute;riode march&eacute; :</b> ' + periodeMarcheTitle + ' - <b>Indicateur produit :</b> ' + indicateurTitle + '</span>',
            useHTML: true
        },
        xAxis: [{
            categories: json.categ,
            labels: {
                rotation: 0,
                align: 'center',
                format: '{value}',
                style: {
                	fontSize: '9px',
                	fontFamily: 'Arial'
                }
            }		    
        }],
        yAxis: [
	        { // Primary yAxis
	            labels: {
	                format: '{value}', // % PM', // pas utilisé 
	                style: {
	                    color: '#59626B',
	                    fontSize: '9px',
	                	fontFamily: 'Arial'
	                }
	                ,formatter: function() {
	                	return format_nombre(this.value);
//	                	if (indicateur == 'PM') {
//	                		return format_nombre(this.value) + ' %';
//	                	} else if (indicateur == 'D_PM') {
//	                		return format_nombre(this.value) + ' pt';
//	                	} else if (indicateur == 'VOL') {
//	                		return format_nombre(this.value) + '';
//	                	} else if (indicateur == 'D_VOL') {
//	                		return format_nombre(this.value) + '';
//	                	} else if (indicateur == 'EVOL_VOL') {
//	                		return format_nombre(this.value) + ' %';
//	                	}
	                }
	            },
	            title: {
	                text: '<span style="font-size:11px;font-family:Arial;font-weight:normal;">' + indicateurTitle + '</span>', // Part de marche
	                useHTML: true,
	                style: {
	                    color: '#59626B'
	                }
	            },
	            gridLineDashStyle: 'dot',
//	            min:minJsonData,
//	            max:maxJsonData,
	            endOnTick: false, // axes non liés
	            showLastLabel: true
	        }, { // Secondary yAxis
	            title: {
	                text: '<span style="font-size:11px;font-family:Arial;font-weight:normal;">Unites</span>',
	                useHTML: true,
	                style: {
	                    color: '#59626B'
	                }
	            },
	            gridLineDashStyle: 'ShortDot',
	            labels: {
	                format: '{value} k',
	                formatter : function() {
	                	return format_nombre(this.value) + " k";
	                },
	                style: {
	                    color: '#59626B',
	                    fontSize: '9px',
	                	fontFamily: 'Arial'
	                }
	            },
//	            min:minJsondataMarche,
//	            max:maxJsondataMarche,
	            gridLineWidth : 0,
	            endOnTick: false, // axes non liés
	            opposite: true,
	            showLastLabel: true
	        }
	    ],
        tooltip: {
            shared: false,
            crosshairs: true
//            ,formatter: function() {
//            	if (this.series.name == 'Marche') {
//            		return this.x + '<br />Marche : ' + format_nombre(this.y.toFixed(0));
//            	} else {
//            		return this.x + '<br />' + this.series.name + ' : ' + this.y + '%';
//            	}
//            }
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            x: 0,
            verticalAlign: 'bottom',
            y: 0,
            floating: false,
            backgroundColor: '#FFFFFF',
            itemStyle: {
            	fontSize : '10px',
            	fontFamily: 'Arial'
            },
            useHTML: true
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    formatter: function () {
                    	// On affiche les valeurs sur les courbes juste pour les produits GSK 
                    	if (!(json.mapProduitsType[this.series.name] != undefined && json.mapProduitsType[this.series.name] == 'GSK')) {
                    		$('.datalabel' + this.series.name.replace(/\s/g, "").replace(/[&\/\\#,+()$~%.'":*?<>{}]/g,'_')).hide();
                    	}
                    	if (this.point === this.series.data[this.series.data.length - 1]) {
                    		if (this.series.name == 'Marche') {
                    			return '<div style="font-size:9px;" class="datalabelLast' + this.series.name.replace(/\s/g, "").replace(/[&\/\\#,+()$~%.'":*?<>{}]/g,'_') + '">' + this.y.toFixed(0) + '</div>';
                    		} else {
                    			return '<div style="font-size:9px;color:' + this.series.color + ';" class="datalabelLast' + this.series.name.replace(/\s/g, "").replace(/[&\/\\#,+()$~%.'":*?<>{}]/g,'_') + '">' + this.y + '</div>';
                    		}
                    	} 
                    	if (this.series.name == 'Marche') {
                    		return '<div style="font-size:9px;" class="datalabel' + this.series.name.replace(/\s/g, "").replace(/[&\/\\#,+()$~%.'":*?<>{}]/g,'_') + '">' + this.y.toFixed(0) + '</div>';
                    	} else {
                    		return '<div style="font-size:9px;color:' + this.series.color + ';" class="datalabel' + this.series.name.replace(/\s/g, "").replace(/[&\/\\#,+()$~%.'":*?<>{}]/g,'_') + '">' + this.y + '</div>';
                    	}
                    }
                },
                events: {
                    click: function(event) {
                    	$('.datalabel' + this.name.replace(/\s/g, "").replace(/[&\/\\#,+()$~%.'":*?<>{}]/g,'_')).toggle();
                    }
                }
            }
        },
        series: seriesProduits
	});
	
	// Formatage des axes Y :  
	// 		0 <= yAxis[0] <= 100 
	//  
	
	var extremes0 = chartDyn.yAxis[0].getExtremes();
	var extremes1 = chartDyn.yAxis[1].getExtremes();
	var max1 = (Math.floor(chartDyn.yAxis[1].dataMax / chartDyn.yAxis[1].tickInterval)) * chartDyn.yAxis[1].tickInterval + chartDyn.yAxis[1].tickInterval;
	chartDyn.yAxis[1].setExtremes(extremes1.dataMin, max1);
	var maxx = extremes0.max;
	if (extremes0.max >= 100) {
		maxx = 100;
	}
	var minn = extremes0.min;
	if (minn <= 0) {
		minn = 0;
	}
	chartDyn.yAxis[0].setExtremes(minn, maxx);
	
//	// chartDyn.yAxis[1].tickInterval = extremes.dataMax / 10;
//	var extremes0 = chartDyn.yAxis[0].getExtremes();
//	var extremes1 = chartDyn.yAxis[1].getExtremes();
//	// var max0 = (Math.floor(chartDyn.yAxis[0].dataMax / chartDyn.yAxis[0].tickInterval)) * chartDyn.yAxis[0].tickInterval + chartDyn.yAxis[0].tickInterval;
//	var max1 = (Math.floor(chartDyn.yAxis[1].dataMax / chartDyn.yAxis[1].tickInterval)) * chartDyn.yAxis[1].tickInterval + chartDyn.yAxis[1].tickInterval;
//	//  alert("d=" + Math.floor(chartDyn.yAxis[1].dataMax / chartDyn.yAxis[1].tickInterval) + ", max1=" + max1 + ", tick=" + chartDyn.yAxis[1].tickInterval + ", dataMax=" + chartDyn.yAxis[1].dataMax +", dataMin=" + extremes1.dataMin);
//	// var max0 = (Math.floor(chartDyn.yAxis[0].dataMax / chartDyn.yAxis[0].tickInterval)) * chartDyn.yAxis[0].tickInterval + chartDyn.yAxis[0].tickInterval;
//	chartDyn.yAxis[1].setExtremes(extremes1.dataMin, max1);
//	var maxx = extremes0.max;
//	if (extremes0.max >= 100) {
//		maxx = 100;
//	}
//	var minn = extremes0.min;
//	if (minn <= 0) {
//		minn = 0;
//	}
//	chartDyn.yAxis[0].setExtremes(minn, maxx);
	
}

// Formatage de nombre (ex : 1000 => 1 000) 
function format_nombre(nbr) {
	var elem = (nbr + '').split(".");
	var nombre = '' + elem[0];
	var retour = '';
	var count = 0;
	for (var i = nombre.length-1 ; i >= 0 ; i--) {
		if (count != 0 && count % 3 == 0)
			retour = nombre[i] + ' ' + retour;
		else
			retour = nombre[i] + retour;
		count++;
	}
	if (elem[1] != undefined) {
		retour += "." + elem[1];
	}
	return retour;
}
